<template>
  <div id="app">
    <!-- 修改 -->
    <el-dialog title="修改信息" :visible.sync="update" @close="getBookList()">
      <template slot-scope="scope">
        <el-form v-model="currentBook" style="line-height: 9px;" label-width="100px">
          <el-row :gutter="24">
            <el-form-item label="图片">
              <div style="width: 15%;">
                <el-image :src="currentBook.url" style="width: 73px; height: 93px;"></el-image>
              </div>
            </el-form-item>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="书名">
                <el-input v-model="currentBook.name"></el-input>
              </el-form-item>
              <el-form-item label="作者">
                <el-input v-model="currentBook.author"></el-input>
              </el-form-item>
              <el-form-item label="大小">
                <el-input v-model="currentBook.size"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item>
                <template slot-scope="scope">
                  <el-switch v-model="scope.row.enable" :active-value="1" :inactive-value="0" active-text="启用"
                             inactive-text="禁用" @change="changeEnable(scope.row)">
                  </el-switch>
                </template>
              </el-form-item>
              <el-form-item label="篇幅">
                <el-input v-model="currentBook.type"></el-input>
              </el-form-item>
              <el-form-item label="类型">
                <el-input v-model="currentBook.kind"></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-input v-model="currentBook.status"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="最新章节">
                <el-input v-model="currentBook.lastChapter"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="简介">
            <el-input v-model="currentBook.introduction" type="textarea" :autosize="{ minRows: 7, maxRows: 7}">
            </el-input>
          </el-form-item>
          <el-button type="primary" size="medium" @click="updateBook()">确认</el-button>
        </el-form>
      </template>
    </el-dialog>
    <!-- 详情 -->
    <el-dialog title="详情信息" :visible.sync="detail">
      <template slot-scope="scope">
        <el-descriptions :column="3" v-model="currentBook">
          <el-descriptions-item label="图片" span="3">
            <el-image :src="currentBook.url" style="width: 83px; height: 103px;"></el-image>
          </el-descriptions-item>
          <el-descriptions-item label="书名">
            <el-tag type="warning">{{ currentBook.name }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="作者">{{ currentBook.author }}</el-descriptions-item>
          <el-descriptions-item label="篇幅">{{ currentBook.type }}</el-descriptions-item>
          <el-descriptions-item label="类型">{{ currentBook.kind }}</el-descriptions-item>
          <el-descriptions-item label="是否启用">
            <el-switch
              v-model="currentBook.enable"
              :active-value="1"
              :inactive-value="0"
              disabled>
            </el-switch>
          </el-descriptions-item>
          <el-descriptions-item label="最新章节" span="2">{{ currentBook.lastChapter }}</el-descriptions-item>
          <el-descriptions-item label="修改时间" span="3">{{ currentBook.lastUpdateTime }}</el-descriptions-item>
          <el-descriptions-item label="简介" span="3">
            <el-input type="textarea" v-model="currentBook.introduction" rows="7"></el-input>
          </el-descriptions-item>
        </el-descriptions>
      </template>
    </el-dialog>
    <!-- 模糊匹配占位 -->
    <div>
      <el-row>
        <el-col :span="3">
          <el-input size="small" placeholder="书名" v-model="name"></el-input>
        </el-col>
        <el-col :span="1">
          &nbsp;
        </el-col>
        <el-col :span="3">
          <el-input size="small" placeholder="作者" v-model="author"></el-input>
        </el-col>
        <el-col :span="1">
          &nbsp;
        </el-col>
        <el-col :span="3">
          <el-select v-model="kind" clearable placeholder="请选择分类" size="small">
            <el-option
              v-for="(kind,index) in kindList.kind"
              :key="index"
              :label="kind"
              :value="kind">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="1">
          &nbsp;
        </el-col>
        <el-col :span="3">
          <el-select v-model="type" clearable placeholder="请选择篇幅" size="small">
            <el-option
              v-for="(type,index) in kindList.type"
              :key="index"
              :label="type"
              :value="type">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="1">
          &nbsp;
        </el-col>
        <el-col :span="2">
          <el-button size="mini" @click="clean">重置</el-button>
        </el-col>
        <el-col :span="2">
          <el-button size="mini" @click="getBookList">查询</el-button>
        </el-col>
      </el-row>
    </div>
    <el-table :data="bookList" height="580px" size="medium" style="width: 100%" max-height="100%">
      <el-table-column fixed prop="url" label="图书图片" width="200" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.url" width="85" height="115" class="cover" alt=""/>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="书名" width="250">
      </el-table-column>
      <el-table-column prop="author" label="作者" width="140">
        <template slot-scope="scope">
          <el-popover placement="top-start" width="100" trigger="hover" content="点击查看作者信息">
            <el-link slot="reference" href="" type="primary" :underline="false">{{ scope.row.author }}</el-link>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="篇幅" width="150">
      </el-table-column>
      <el-table-column prop="kind" label="类型" width="150">
        <template slot-scope="scope">
          <el-tag type="warning">{{ scope.row.kind }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="lastChapter" label="最新章节" width="200">
      </el-table-column>
      <el-table-column prop="enable" label="是否上架" width="173">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.enable" :active-value="1" :inactive-value="0" active-text="启用"
                     inactive-text="禁用" @change="changeEnable(scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="lastUpdateTime" label="更新时间" width="200">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="240" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="getDetail(scope.row)">查看</el-button>
          <el-button type="success" size="small" @click="changeBook(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="deleteBook(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="margin-top: 5px; text-align: center" background layout="prev, pager, next" :total="this.total"
                   :hide-on-single-page="true"
                   :current-page="this.currentPage" @current-change="setCurrentPage">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'book',
  data() {
    return {
      name: '',
      author: '',
      type: '',
      kind: '',
      kindList: [],
      bookList: [],
      total: 0,
      currentPage: 1,
      detail: false,
      update: false,
      currentBook: {},
    }
  },
  created() {
    this.getKind();
    this.getBookList();
  },
  methods: {
    clean(){
      this.name = '';
      this.author = '';
      this.kind = '';
      this.type = '';
      this.getBookList();
    },
    changeKind(index) {
      this.kindIndex = index;
      this.getBookList();
    },
    changeType(index) {
      this.typeIndex = index;
      this.getBookList();
    },
    getKind() {
      this.$axios.get("/book-message/kind/list").then(res => {
        if (res.data.code === '200') {
          this.kindList = res.data.data;
        } else {
          this.$message.error(res.data.message);
        }
      })
    },
    setCurrentPage(param) {
      this.currentPage = param;
      this.getBookList();
    },
    getBookList() {
      this.$axios.post(
        "/book-message/page", {
          currentPage: this.currentPage,
          kind: this.kind,
          type: this.type,
          author: this.author,
          name: this.name
        }
      ).then(res => {
        if (res.data.code === '200') {
          this.bookList = res.data.data;
          this.total = res.data.total;
        } else {
          this.$message.error(res.data.message);
        }
      })
    },
    changeEnable(param) {
      this.$axios.post("/book-message/update/status", {
        "id": param.id,
        "enable": param.enable
      }).then(res => {
        if (res.data.code === '200') {
          if (param.enable === 1) {
            this.$message({
              message: "上架图书成功",
              type: 'success'
            });
          }
          if (param.enable === 0) {
            this.$message({
              message: "下架图书成功",
              type: 'success'
            });
          }
          this.getBookList();
        } else {
          if (param.enable === 1) {
            this.$message.error('上架图书失败');
          } else {
            this.$message.error('下架图书失败');
          }
        }
      })
    },
    getDetail(book) {
      this.currentBook = book;
      this.detail = true;
    },
    changeBook(book) {
      this.currentBook = book;
      this.update = true;
    },
    updateBook() {
      this.update = false;
      this.$axios.post("/book-message/update", {
        "id": this.currentBook.id,
        "name": this.currentBook.name,
        "author": this.currentBook.author,
        "introduction": this.currentBook.introduction,
        "type": this.currentBook.type,
        "url": this.currentBook.url,
        "kind": this.currentBook.kind,
        "size": this.currentBook.size,
        "lastChapter": this.currentBook.lastChapter,
        "lastUpdateTime": this.currentBook.lastUpdateTime,
        "wordNumber": this.currentBook.wordNumber
      }).then(res => {
        if (res.data.code === '200') {
          this.$message({
            message: "更新成功",
            type: 'success'
          });
        } else {
          this.$message.error("系统异常，更新失败");
        }
      })
    },
    deleteBook(book) {
      this.$axios.post("/book-message/delete", {
        "id": book.id
      }).then(res => {
        if (res.data.code === '200') {
          this.$message({
            message: "删除成功",
            type: 'success'
          });
          this.getBookList();
        } else {
          this.$message.error("系统异常，更新失败");
        }
      });
    }
  }
}
</script>

<style scoped>
.active {
  background-color: #666666;
  color: yellow;
  margin-left: 15px;
}

.kind {
  background-color: #666666;
  color: #EEEEEE;
  margin-top: 5px
}

span {
  text-align: left;
  line-height: 30px;
  margin-left: 15px;
}

span:hover {
  margin-left: 15px;
  color: lightblue;
}
</style>
